<!--  -->
<template>
  <div data-v-299f80a2="" class="top-bar">
    <div data-v-299f80a2="" class="left">
      <div data-v-299f80a2="" class="logo">
        <img data-v-299f80a2="" src="/public/icon.svg" alt="logo" />
        <span data-v-299f80a2="" class="text">PSD-LINK</span>
      </div>
      <div
        data-v-342d9b2c=""
        data-v-299f80a2=""
        class="menu"
        style="height: 50px; padding: 5px; background: rgb(26, 27, 28)"
      >
        <ul data-v-342d9b2c="" style="gap: 2px">
          <li
            data-v-342d9b2c=""
            class="menu-item"
            v-for="(item, index) in tabs"
            :key="index"
            :class="activeExmTab == item.value ? 'active' : ''"
            @click="changeExmTab(item.value)"
          >
            <router-link :to="{ name: item.name }" class="flex items-center">
              <span
                data-v-342d9b2c=""
                class="icon-container"
                :class="activeExmTab == item.value ? 'activeIcon' : ''"
                ><em data-v-342d9b2c="" class="iconfont" :class="item.icon"></em
              ></span>
              <span class="text w-20 text-center">{{ item.label }}</span>
            </router-link>
          </li>
          <li
            data-v-342d9b2c=""
            class="slider"
            style="background: #2a82e4; opacity: 1; width: 130px"
            :style="{ left: tabs.findIndex((e) => e.value == activeExmTab) * 132 + 'px' }"
          ></li>
        </ul>
      </div>
      <!-- <div
        data-v-c14070e8=""
        data-v-299f80a2=""
        class="search space"
        style="background: rgb(26, 27, 28); width: 256px; height: 50px; padding-right: 7.5px"
      >
        <input data-v-c14070e8="" type="text" autocomplete="off" />
        <span data-v-c14070e8="" style="width: 35px; height: 35px"
          ><em data-v-c14070e8="" class="iconfont icon-search" style="font-size: 20px"></em
        ></span>
      </div> -->
    </div>
    <div class="right h-full flex">
      <div class="list-container">
        <button
          @click="addQQ('485404986')"
          title="QQ:939982796 点击添加"
          class="upload-btn h-full bg-[#1a1b1c] text-white/80 rounded-full px-5 mr-5 flex py-2 items-center"
        >
          群聊：485404986
        </button>
      </div>
      <div class="list-container">
        <button
          @click="addQQ('939982796')"
          title="QQ:939982796 点击添加"
          class="upload-btn h-full bg-[#1a1b1c] text-white/80 rounded-full px-2 flex py-2 items-center"
        >
          <img src="@/components/icons/head.jpg" alt="" class="h-full rounded-full mr-2" />夏三七
        </button>
      </div>
      <!-- <button class="upload-btn h-full bg-[#1a1b1c] text-white w-12 rounded-full">
        <em class="iconfont icon-upload"></em>
      </button> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref, reactive } from 'vue'
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'
import { RouterLink } from 'vue-router'
const { activeExmTab } = storeToRefs(useCounterStore())
const { changeExmTab } = useCounterStore()
const addQQ = async (text: string) => {
  // await navigator.clipboard.writeText('939982796');

  const textarea = document.createElement('textarea')
  textarea.value = text
  document.body.appendChild(textarea)
  textarea.select()
  try {
    const successful = document.execCommand('copy')
    const msg = successful ? 'successful' : 'unsuccessful'
    console.log('Copying text command was ' + msg)
  } catch (err) {
    console.error('Oops, unable to copy', err)
  }
  document.body.removeChild(textarea)
  ElMessage.success('复制到剪贴板，请自行添加')
  // const qqAddUrl = `http://wpa.qq.com/msgrd?v=3&uin=${'939982796'}&site=qq&menu=yes`
  // window.open(qqAddUrl, '_blank')
}

const tabs = reactive([
  { label: '首页', value: 0, icon: 'icon-image', name: 'homePage' },
  { label: '软件下载', value: 1, icon: 'icon-cascading', name: 'download' },
  { label: '课程介绍', value: 2, icon: 'icon-arrow-top', name: 'course' },
  { label: '关于我们', value: 3, icon: 'icon-house', name: 'about' }
])
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
</style>
